<script setup lang="ts">
import {
  getJieDanByIdAPI,
  putJieDanByTypeAPI
} from '@/services/address'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

// 表单数据
const form = ref({
  id: 0,
  type: '', // 餐品类型
  hour: '', // 时间
  minute: '', // 时间
})


// 获取页面参数
const query = defineProps<{
  type: string
}>()
const nowtime = ref('')
const timeList = ref<string[]>([])

// 修改时间
const onTimeChange: UniHelper.TimePickerOnChange = (ev) => {
  nowtime.value = ev.detail.value
  timeList.value = nowtime.value.split(":")
  form.value.hour = timeList.value[0]
  form.value.minute = timeList.value[1]
  console.log(timeList.value)
}

// 获取收货地址详情数据
const getJieDanByIdData = async () => {
  if (query.type) {
    // 发送请求
    const res = await getJieDanByIdAPI(query.type)
    // 把数据合并到表单中
    Object.assign(form.value, res.result[0])
    nowtime.value = res.result[0].hour + ":" + res.result[0].minute
  }
}

// 页面加载
onLoad(() => {
  getJieDanByIdData()
})

// 动态设置标题
uni.setNavigationBarTitle({ title: query.type ? '修改截单时间' : '新建截单时间' })

// 定义校验规则
const rules: UniHelper.UniFormsRules = {
  time: {
    rules: [
      { required: false, errorMessage: '请选择时间' },
    ],
  }
}

// 表单组件实例
const formRef = ref<UniHelper.UniFormsInstance>()

// 提交表单
const onSubmit = async () => {
  try {
    // 表单校验
    await formRef.value?.validate?.()
    // 校验通过后再发送请求
    if (query.type) {
      form.value.type = query.type
      // 修改地址请求
      await putJieDanByTypeAPI(form.value)
    }
    // 成功提示
    uni.showToast({ icon: 'success', title: query.type ? '修改成功' : '添加成功' })
    // 返回上一页
    setTimeout(() => {
      uni.navigateBack()
    }, 400)
  } catch (error) {
    uni.showToast({ icon: 'error', title: '请填写完整信息' })
  }
}
</script>

<template>
  <view class="content">
    <uni-forms :rules="rules" :model="form" ref="formRef">
      <!-- 表单内容 -->
      <uni-forms-item name="name" class="form-item">
        <text class="label">名称</text>
        <text>{{ form.type }}</text>
      </uni-forms-item>
      <uni-forms-item name="time" class="form-item">
        <text class="label">截单时间</text>
        <picker @change="onTimeChange" mode="time" class="picker" :value="nowtime" start="00:00" end="23:59">
          <view v-if="nowtime">{{ nowtime }}</view>
        </picker>
      </uni-forms-item>
    </uni-forms>
  </view>
  <!-- 提交按钮 -->
  <button @tap="onSubmit" class="button">保存并使用</button>
</template>

<style lang="scss">
page {
  background-color: #f4f4f4;
}

.content {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .form-item,
  .uni-forms-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96rpx;
    padding: 25rpx 10rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    margin-bottom: 0;

    // 调整 uni-forms 样式
    .uni-forms-item__content {
      display: flex;
    }

    .uni-forms-item__error {
      margin-left: 200rpx;
    }

    &:last-child {
      border: none;
    }

    .label {
      width: 200rpx;
      color: #333;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .switch {
      position: absolute;
      right: -20rpx;
      transform: scale(0.8);
    }

    .picker {
      flex: 1;
    }

    .placeholder {
      color: #808080;
    }
  }
}

.button {
  height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}

.location {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10rpx 0 26rpx;
  height: 64rpx;
  margin: 16rpx 20rpx 0rpx 20rpx;
  color: #474444;
  font-size: 28rpx;
  border-radius: 10rpx;
  background-color: rgba(255, 255, 255, 0.5);

  .location-image {
    width: 5%;
    height: 75%;
  }

  .location-text {
    margin-left: 10rpx;
  }
}
</style>
